<template>
    <div>
    <el-upload
            accept="image/jpeg,image/gif,image/png,image/bmp"
            :show-file-list="showFileList"
            :action="uploadPath"
            :headers="headers"
            :data="data"
            :on-success="uploadLicenseUrl"
            :before-upload="beforeUpload"
            :on-preview="handlePreview"
            :list-type="listType"
            :file-list="fileList"
            class="avatar-uploader">
        <el-button type="primary" size="small">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/jpeg/png文件，且不超过1M</div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="imgurl" alt="">
    </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'uploadImg',
    props: {
        uploadPath: {
            type: String,
            default: ''
        },
        headers: {
            type: Object,
            // eslint-disable-next-line vue/require-valid-default-prop
            default: {}
        },
        data: {
            type: Object,
            // eslint-disable-next-line vue/require-valid-default-prop
            default: {}
        },
        showFileList: {
            type: Boolean,
            default: true
        },
        listType: {
            type: String,
            default: 'picture'
        },
        value: {
            type: String
        }
    },
    data () {
        return {
            fileList: [],
            dialogVisible: false,
            imgurl: ''
        };
    },
    methods: {
        beforeUpload (file) {
            const isLt30M = file.size / 1024 / 1024 < 30;
            if (!isLt30M) {
                this.$message.error('上传图片大小不能超过 30MB!');
            }
            return isLt30M;
        },
        uploadLicenseUrl (response, file, fileList) {
            this.fileList = fileList.slice(fileList.length - 1);
            this.imgurl = response.img_url;
            this.$emit('successCb', response);
            this.$emit('input', response.img_url);
        },
        handlePreview (file) {
            this.dialogVisible = true;
            console.log(file);
        }
    }
};
</script>

<style scoped lang="scss">
    // 上传
    .upload-demo{width:260px;height:160px;
        .upload_btn{width:260px;height:160px;background:#f2f2f2}
        .el-upload__tip{margin:0;float:left}
    }
</style>
